<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet " href="../static/css/main-t.css " th:href="@{/css/main-t.css}"/>
    <link rel="stylesheet" href="./js/sys/layui-v2.4.5/css/layui.css" th:href="@{/js/sys/layui-v2.4.5/css/layui.css}"/>
</head>
<body class="gray-bg nui-scroll" id="test">
    <div class="layui-layout layui-layout-admin layui-fluid">
        <!--主体内容-->
        <div class="row  layui-row layui-col-space5">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">CPU信息</div>
                    <div class="layui-card-body layui-row">
                        <div class="layui-col-md5">
                            <div class="layui-card-body layadmin-takerates">
                                <div class="layui-progress">
                                    <h3>用户使用率</h3>
                                    <div class="layui-progress-bar" th:lay-percent="${server.cpu.used + '%'}" th:style="'width:' + @{(${server.cpu.used + '%'})} +';'">
                                    <span class="layui-progress-text">[[${server.cpu.used + '%'}]]</span></div>
                                </div>
                                <div class="layui-progress">
                                    <h3>系统使用率</h3>
                                    <div class="layui-progress-bar" th:lay-percent="${server.cpu.sys + '%'}" th:style="'width:' + @{(${server.cpu.sys + '%'})} +';'">
                                        <span class="layui-progress-text">[[${server.cpu.sys + '%'}]]</span></div>
                                </div>
                                <div class="layui-progress">
                                    <h3>当前空闲率</h3>
                                    <div class="layui-progress-bar" th:lay-percent="${server.cpu.free + '%'}" th:style="'width:' + @{(${server.cpu.free + '%'})} +';'">
                                        <span class="layui-progress-text">[[${server.cpu.free + '%'}]]</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md7">
                            <div id="a3" class="layui-echart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">内存</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel layadmin-carousel layadmin-backlog">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>总内存</h3>
                                        <p><cite>[[${server.mem.total + 'G'}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>已用内存</h3>
                                        <p><cite>[[${server.mem.used + 'G'}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>剩余内存</h3>
                                        <p><cite>[[${server.mem.free + 'G'}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>使用率</h3>
                                        <p><cite>[[${server.mem.usage}]]%</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>JVM总内存</h3>
                                        <p><cite>[[${server.jvm.total + 'M'}]]</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a href="#" class="layadmin-backlog-body">
                                        <h3>JVM使用率</h3>
                                        <p><cite>[[${server.jvm.usage}]]%</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-top-margin">
            <!-- <div class="layui-col-md6"> -->
            <div class="layui-card">
                <div class="layui-card-header">基本信息与硬件配置</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        <colgroup>
                            <col width="160">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="icon-entity-online">主机名称</div>
                                </td>
                                <td>[[${server.sys.computerIp}]]</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="icon-cpu-online">CPU</div>
                                </td>
                                <td>[[${server.cpu.cpuNum + '核'}]]</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="icon-main-online">操作系统</div>
                                </td>
                                <td class="set-padding">
                                    <div class="icon-server-online">[[${server.sys.osName}]]</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
         <div class="layui-row layui-top-margin">
            <!-- <div class="layui-col-md6"> -->
            <div class="layui-card">
                <div class="layui-card-header">Java虚拟机信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        <colgroup>
                            <col width="160">
                            <col>
                        </colgroup>
                         <tbody>
                                            <tr>
                                                <td>Java名称</td>
                                                <td th:text="${server.jvm.name}">Java</td>
                                                <td>Java版本</td>
                                                <td th:text="${server.jvm.version}">1.8.0</td>
                                            </tr>
                                            <tr>
                                                <td>启动时间</td>
                                                <td th:text="${server.jvm.startTime}">2018-12-31 00:00:00</td>
                                                <td>运行时长</td>
                                                <td th:text="${server.jvm.runTime}">0天0时0分0秒</td>
                                            </tr>
                                            <tr>
                                                <td colspan="1">安装路径</td>
                                                <td colspan="3" th:text="${server.jvm.home}"></td>
                                            </tr>
                                             <tr>
                                                <td colspan="1">项目路径</td>
                                                <td colspan="3" th:text="${server.sys.userDir}"></td>
                                            </tr>
                                        </tbody>
                    </table>
                </div>
            </div>
        </div>
 
        <div class="layui-row layui-top-margin">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        <colgroup>
                            <col width="160">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>盘符路径</th>
                                                <th>文件系统</th>
                                                <th>盘符类型</th>
                                                <th>总大小</th>
                                                <th>可用大小</th>
                                                <th>已用大小</th>
                                                <th>已用百分比</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                            <tr th:each="sysFile : ${server.sysFiles}">
                            <td th:text="${sysFile.dirName}"><div class="icon-stg-online">SATA</div>C:\</td>
                                                <td th:text="${sysFile.sysTypeName}">NTFS</td>
                                                <td th:text="${sysFile.typeName}">local</td>
                                                <td th:text="${sysFile.total}">0GB</td>
                                                <td th:text="${sysFile.free}">0GB</td>
                                                <td th:text="${sysFile.used}">0GB</td>
                                                <td th:class="${sysFile.usage gt 80} ? 'text-danger'">[[${sysFile.usage}]]%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--主页面加载完成后执行-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/sys/echarts-v4.1.0/echarts.min.js}"></script>
    <script src="../static/ruoyi/main-t.js" th:src="@{/ruoyi/main-t.js?v=3.2.0}"></script>
    <script type="text/javascript">
        // 初始化内容
         var data = {  
        		    "butTotal": [[${server.cpu.used}]],
        		    "undTotal": [[${server.cpu.sys}]],
        		    "mainTotal": [[${server.cpu.free}]]
        		    }
        myFunction(data);
    
</script>
</body>
</html>
